<template>
    <!-- 溯源详情 -->
    <table style="width:100%">
        <tr>
            <td style="width: 200px;">
                <img style="width: 200px;height: 200px;" v-if="sources.sourceImage" :src="sources.sourceImage"
                    class="avatar" />

            </td>


            <!-- 右侧信息 -->
            <td style="margin-top: 10px;width: 800px;background-color: white;">

                <h2>{{ sources.goodName }}</h2>
                <table style="width: 800px;">
                    <tr>
                        <td> 生产批次： {{ sources.productDate }}
                        </td>
                        <td> 保质期：{{ sources.userRname }}
                        </td>
                    </tr>

                    <tr>
                        <td> <span>生产许可证：{{ sources.productCode }}</span></td>
                        <td>生产企业：{{ sources.productBusiness }}</td>
                    </tr>
                    <tr>
                        <td> <span>产品检验报告</span>
                            <img style="width: 180px;height: 180px;" v-if="sources.checkImages"
                                :src="sources.checkImages" class="avatar" />

                        </td>

                    </tr>
                </table>


            </td>
        </tr>
    </table>
    <br>
    <hr>
    <!-- 底部信息 -->
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="养殖信息" name="first">

            <AquacultInfo></AquacultInfo>
        </el-tab-pane>
        <el-tab-pane label="屠宰信息" name="second">
            <SlaughterInfo></SlaughterInfo>
        </el-tab-pane>
        <el-tab-pane label="深加工信息" name="third">
            <DeepProcess></DeepProcess>
        </el-tab-pane>

    </el-tabs>



</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'
const dialogVisible = ref(false)
import type { TabsPaneContext } from 'element-plus'

import AquacultInfo from '../SourceMan/AquacultInfo.vue'
import SlaughterInfo from '../SourceMan/SlaughterInfo.vue'
import DeepProcess from '../SourceMan/DeepProcess.vue'



const axios = inject('axios') as AxiosStatic
const router = useRouter()
const route = useRoute()
const activeName = ref('first')

const id = route.query.id;

//溯源管理实体
const sources = ref({
    //"sourceId": 0,
    "goodName": "",
    "productDate": "",
    "userRname": "",// 保质期
    "productCode": "",
    "productBusiness": "",
    "infoCount": 0,
    "sourceImage": "",
    "sourceImagefiles": "",
    "checkImages": "",
    "addName": "",
    // "addDateTime": "",
    // "delName": "",
    // "delDateTime": ""
})
onMounted(() => {
    showById()
})

//根据id反填商品信息

const showById = () => {
    //获取数据
    axios.get('SourceList/GetSourceById?id=' + id).then((res) => {
        console.log(res.data)
        sources.value = res.data.data
        sources.value.sourceImage = "http://localhost:5240" + res.data.data.sourceImage

        return {
            productDate: res.data.data.productDate

        }


    })
}
//将父页面的值传递到子页面












//
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}








</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
